<template>
  <!-- custList.length > 0 && this.$store.state.showToolBarModel && this.$store.state.user.userId === 436 -->
  <div id="ToolBarModel" v-show="custList.length > 0 && this.$store.state.showToolBarModel && this.$store.state.user.roleId === 12">
    <div id="ToolBar" style="width: 30%; margin-left: 70%">
      <Card>
        <div slot="container">
          <el-table ref="multipleTable" :data="custList" max-height="250" style="width: 100%" @row-click="handleClick" :row-style="light">
            <el-table-column class="time" prop="createDate" label="接收时间" width="200px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="customerName" label="客户姓名" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import Card from "@/components/Card.vue";
import Api from "@/http/apis/modules/custManagement.js";
import moment from "moment";
export default {
  components: {
    Card,
  },
  data() {
    return {
      maskShow: false, //销毁重建遮罩节点
      loading: false, //遮罩显示隐藏
      isEidit: true, //开关可编辑状态
      custList: [], //客户列表
      searchForm: {},
      allNewCust: [], // 所有可领取客户
      getNewCustNum: "", //领取客户条数
      // 传给回退组建的入参
      dialogFormVisible: false,
      formLabelWidth: "100px",
      returnArr: [],
      returnType: "B", //回退类型
      reasonReturn: "", //回退理由
      // 分页
      currentPage: 1,
      pageSize: 5,
      total: 0,
    };
  },

  // watch: {
  //   showToolBarModel() {
  //     return this.$store.state.showToolBarModel;
  //   },
  // },

  methods: {
    //获取所有未读客户
    getCustList() {},

    // 高亮回调：高亮首电客户
    light({ row, rowIndex }) {
      if (row.isTel == 0) {
        return {
          color: "#DD001B",
        };
      }
    },

    // 查看客户详情
    handleClick(row) {
      this.$store.commit("INCOMING", false);
      console.log("来电状态", this.showToolBarModel);
      console.log(row);
      this.$router.push({
        path: "/custManagement/custDetails",
        query: {
          customerId: row.customerId,
          id: row.id,
          ownerId: this.$store.state.user.userId,
          form: row,
          backPath: "/custManagement/CustList",
        },
      });
    },

    webSocket() {
      const that = this;
      if (typeof WebSocket == "undefined") {
        that.$message({
          type: "warning",
          message: "当前浏览器无法接收实时报警信息，请使用谷歌浏览器！",
        });
      } else {
        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
        const socketUrl =
            "ws" +
            process.env.VUE_APP_SERVER_URL.substring(4) +
            "/api/websocket/" +
            that.$store.state.user.userId;
        this.socket = new WebSocket(socketUrl);
        // 监听socket打开
        that.socket.onopen = function () {
          console.log("浏览器WebSocket已打开");
        };
        // 监听socket消息接收
        that.socket.onmessage = function (msg) {
          // 转换为json对象
          const data = JSON.parse(msg.data);

          if (data) {
            data.result.list.forEach((item) => {
              item.focusOn = item.focusOn == 1 ? true : false;
              item.createDate = moment(item.createDate).format(
                  "YYYY-MM-DD hh:mm:ss"
              );
            });
            that.custList = data.result.list;

            if (
                data.result.total > 0 &&
                that.$route.path !== "/custManagement/custDetails"
            ) {
              that.$store.commit("INCOMING", true);
            }
          }
        };
        // 监听socket错误
        that.socket.onerror = function () {
          that.$message({
            message: "服务器错误，无法接收实时报警信息",
            type: "error",
          });
        };
        // 监听socket关闭
        that.socket.onclose = function () {
          console.log("WebSocket已关闭");
        };
      }
    },
  },

  // 监听,当路由发生变化的时候执行
  watch: {
    showToolBarModel() {
      return this.$store.state.showToolBarModel;
    },
    $route(to) {
      if (to.path !== "/custManagement/custDetails") {
        if (localStorage.getItem("close") === "关闭") {
          this.$store.commit("INCOMING", false);
          setTimeout(() => {
            localStorage.removeItem("close");
          }, 2000);
        } else {
          this.$store.commit("INCOMING", true);
        }
      } else {
        this.$store.commit("INCOMING", false);
      }
    },
  },

  created() {
    if (this.$store.state.user.roleId === 12) {
      this.webSocket();
    }
  },

  mounted() {},
};
</script>

<style lang="less" scoped>
#ToolBar {
  position: absolute;
  bottom: 0px;
  right: 16px;
  width: 100%;
  /*height: 20px;*/
  text-align: center;
  background: #ccc;
  z-index: 2;
  overflow: hidden;
}

/* 遮罩 */
#mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.getNewCust {
  .top {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-form-item {
      margin-bottom: 0;
      /deep/.el-form-item__label {
        padding-top: 0px;
      }
    }
    strong {
      font-weight: 600;
      margin: 0 20px 0 5px;
    }
    .getNumBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
}

#ToolBarModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 9000;
}
</style>
